<template>
	<el-container>
		<!-- <el-header style="text-align: ; font-size: 12px;width: 90%;">
		<h2 style="position: relative;top: -15px;">客户贡献分析</h2>
	</el-header> -->
		<div id="gxfx">

			<el-form :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="客户名称">
					<el-input v-model="form.name" placeholder="客户名称"></el-input>
				</el-form-item>
				<el-form-item label="客户经理">
					<el-input v-model="form.username" placeholder="客户名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">帮助</el-button>
					<el-button type="danger" @click="onSuf">查询</el-button>
					<el-button type="danger" @click="exportExcel">导出</el-button>
				</el-form-item>
			</el-form>
			<div class="line"></div>
			<template>
				<el-table id="out-table" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					style="width: 100%" max-height="550">
					<el-table-column prop="id" label="编号" width="150" type="index">
					</el-table-column>
					<el-table-column prop="lostDay" label="年份" width="150">
					</el-table-column>
					<el-table-column prop="name" label="客户" width="200">
					</el-table-column>
					<el-table-column prop="username" label="客户经理" width="200">
					</el-table-column>
					<el-table-column prop="lostCause" label="流失原因" width="250">
					</el-table-column>
				</el-table>
			</template>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[5,10,15,20]" :page-size="pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
				</el-pagination>
			</div>
		</div>
	</el-container>
</template>

<script>
	import FileSaver from 'file-saver'
	import XLSX from 'xlsx'
	export default {
		name: "gxfx",
		data() {
			return {
				juese: '',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				form: {
					name: '',
					username: ''
				},
				tableData: [


				],
				tableda: {},
				value: '全部'
			}
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname,
				this.getData();

		},
		methods: {
			getData() {
				this.$http.get('/c/a').then(res => {
					console.log(res.data);
					this.tableData = res.data;
				});
			},

			onSubmit() {
				console.log('s!');
			},

			onSuf() {
				this.$http.post('/c/b?name=' + this.form.name + '&username=' + this.form.username).then(res => {
					this.tableData = res.data;
				});
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			exportExcel() {
				/* generate workbook object from table */
				var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
				/* get binary string as output */
				var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
				try {
					FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '客户流失分析.xlsx')
				} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
				return wbout
			}
		}
	}
</script>

<style scoped="scoped">
	#oppoyment {
		margin-left: 40px;
	}

	.line {
		background: black;
	}

	#gxfx {
		padding: 15px;
		background-color: #F0F0F0;
		border: 1px solid #ddd;
		border-radius: 5px;
		position: relative;
		left: 115px !important;
	}

	#gxfx>>>.el-main {
		margin: 0 !important;
		padding: 0 !important;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
		position: relative;
		left: 150px;
	}
</style>